<template>
  <div class="all">
		<cover>
			<img class="img" :src="imgLink" alt="" :style="{width:width,height:height}">
		</cover>
	  <div class="info">
			<a class="name" :href="nameSrc">{{name}}</a>
			<a class="singer" :href="singerSrc">{{singer}}</a>
		</div>
		<div class="time">{{time}}</div>
  </div>
</template>

<script>
	import cover from '../common/cover.vue'
  export default{
    name:'',
    data(){
      return {
		  
       }
    },
	props:{
		imgLink:{
		  type:String,
		  default(){
		    return require('../../assets/img/test2.jpg')
		  }
		},
	  name:{
	    type:String,
	    default(){
	      return "11111111111111111111111111111111111"
	    }
	  },
	  singer:{
		  type:String,
		  default(){
			  return "111111"
		  }
	  },
	  time:{
		  type:String,
		  default(){
		  	return "11111"
		  }
	  },
		width:{
		  type:String,
		  default(){
		  	return "86px"
		  }
		},
		height:{
			type:String,
			default(){
				return "86px"
			}
		},
		singerSrc:{
			type:String,
			default(){
				return "#"
			}
		},
		nameSrc:{
			type:String,
			default(){
				return "#"
			}
		},
	},
    methods:{
      
    },
    components:{
       cover
    }
  }
</script>

<style scoped>
	.all{
	  display: flex;
	}
	.all .img{
		width: 86px;
		height: 86px;
	}
	.name{
		width: 190px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.name:hover{
		font-weight: bolder;
	}
	.singer{
		color: var(--font-grey);
	}
	.singer:hover{
		color: var(--bcc-green);
	}
	.info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 10px;
	}
	.time{
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--font-grey);
	}
</style>
